<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="theme-color" content="#91D4DA">
    <title>任务十一：移动Web页面布局实践</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
      {% include "flexible.min.js" %}
    </script>
  </head>
  <body>
    <header>
      <a class="goback" href="###">
        <img src="imgs/left-arrow.svg" alt="返回" />
        返回
      </a>
      <h1>这是标题</h1>
    </header>
    <div class="body">
      <nav>
        <ul>
          <li>导航</li>
          <li class="active">导航</li>
          <li>导航</li>
          <li>导航</li>
          <li>导航</li>
        </ul>
      </nav>
      <img class="banner" src="imgs/bear-figure.png" alt="bear figure" />
      <div class="labels">
        <ul>
          <li>
            <figure>
              <img src="imgs/doc.svg" alt="label" />
            </figure>
            <p>标签</p>
          </li>
          <li>
            <figure>
              <img src="imgs/doc.svg" alt="label" />
            </figure>
            <p>标签</p>
          </li>
          <li>
            <figure>
              <img src="imgs/doc.svg" alt="label" />
            </figure>
            <p>标签</p>
          </li>
          <li>
            <figure>
              <img src="imgs/doc.svg" alt="label" />
            </figure>
            <p>标签</p>
          </li>
          <li>
            <figure>
              <img src="imgs/doc.svg" alt="label" />
            </figure>
            <p>标签</p>
          </li>
        </ul>
      </div>
      <div class="columns">
        <ul>
          <li>
            <figure>
              <img src="imgs/bear-column-1.png" alt="column bear" />
            </figure>
            <h2>分栏一</h2>
            <h3>分栏小标题</h3>
          </li>
          <li>
            <figure>
              <img src="imgs/bear-column-2.png" alt="column bear" />
            </figure>
            <h2>分栏二</h2>
            <h3>分栏小标题</h3>
          </li>
          <li>
            <figure>
              <img src="imgs/bear-column-3.png" alt="column bear" />
            </figure>
            <h2>分栏三</h2>
            <h3>分栏小标题</h3>
          </li>
        </ul>
      </div>
      <article class="module">
        <header>模块一</header>
        <section>
          <img src="imgs/bear-avatar.png" alt="avatar" />
          <ul>
            <li>这是文案</li>
            <li>这是文案</li>
            <li>这是文案</li>
            <li>这是文案</li>
          </ul>
        </section>
        <section>
          <img src="imgs/bear-avatar.png" alt="avatar" />
          <ul>
            <li>这是文案</li>
            <li>这是文案</li>
            <li>这是文案</li>
            <li>这是文案</li>
          </ul>
        </section>
      </article>
      <article class="module">
        <header>模块二</header>
        <section>
          <img src="imgs/bear-avatar.png" alt="avatar" />
          <ul>
            <li>这是文案</li>
            <li>这是文案</li>
            <li>这是文案</li>
            <li>这是文案</li>
          </ul>
        </section>
        <section>
          <img src="imgs/bear-avatar.png" alt="avatar" />
          <ul>
            <li>这是文案</li>
            <li>这是文案</li>
            <li>这是文案</li>
            <li>这是文案</li>
          </ul>
        </section>
      </article>
      <div class="articles">
        <article>
          <img src="imgs/bear-article.png" alt="article" />
          <section>
            <header>这是文章标题字号是22的文章标题</header>
            <aside>文章来源 6分钟前</aside>
          </section>
        </article>
        <article>
          <img src="imgs/bear-article.png" alt="article" />
          <section>
            <header>这是另一个文章标题</header>
            <aside>文章来源 6分钟前</aside>
          </section>
        </article>
        <article>
          <section>
            <header>这个也是文章标题字号是22的文章标题</header>
            <ul class="imgs">
              <li><img src="imgs/bear-article.png" alt="article" /></li>
              <li><img src="imgs/bear-article.png" alt="article" /></li>
              <li><img src="imgs/bear-article.png" alt="article" /></li>
            </ul>
            <aside>文章来源 7分钟前</aside>
          </section>
        </article>
      </div>
    </div>
  </body>
</html>
